<template>
  <div class="zw-wrapper">
    <div>
      <custNavbar title="平面设计" uname="search" paths="/search"></custNavbar>
    </div>
    <div class="wrapper">
      <van-tabs v-model="active" class="tabs" sticky>
        <van-tab title="视觉设计">
          <div class="content">
            <div class="scroll-container">
              <div class="zw-course">
                <ul v-for="item in course" :key="item._id">
                  <dl class="dl" @click="storeCourseData(item)">
                    <dt class="dt"><img class="zw-imgs" :src="item.image" alt="" /></dt>
                    <dd class="dd">
                      <p class="zw-title">{{ item.title }}</p>
                      <p class="zw-num">{{ item.num }}人正在学习</p>
                      <span class="zw-price">
                        {{
                          item.price
                            ? "￥" + (item.price * item.discount).toFixed(2)
                            : "免费"
                        }}
                      </span>
                      <span class="zw-price1">
                        {{ item.price ? "￥" + item.price : "" }}</span
                      >
                     
                    </dd>
                  </dl>
                </ul>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="海报设计">
          <div class="content">
            <div class="scroll-container">
              <div class="zw-course">
                <ul v-for="item in course.slice(10)" :key="item._id">
                  <dl class="dl" @click="storeCourseData(item)">
                    <dt class="dt"><img class="zw-imgs" :src="item.image" alt="" /></dt>
                    <dd class="dd">
                      <p class="zw-title">{{ item.title }}</p>
                      <p class="zw-num">{{ item.num }}人正在学习</p>
                      <p class="zw-price">
                        {{ item.price ? "￥" + item.price : "免费" }}
                      </p>
                    </dd>
                  </dl>
                </ul>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="电商设计">
          <div class="content">
            <div class="scroll-container"></div>
          </div>
        </van-tab>
        <van-tab title="字体设计">
          <div class="content">
            <div class="scroll-container"></div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import custNavbar from "@/components/custNavbar/index.vue";
import { getCourses } from "@/api/index.js";
import { useRouter } from "vue-router";
const router = useRouter();
const course = ref([]);
const active = ref("");

const { data } = await getCourses();
course.value = data;
const storeCourseData = (item) => {
  localStorage.setItem("listObj", JSON.stringify(item));
  router.push("/xiang");
};
</script>

<style lang="scss" scoped>
.zw-wrapper {
  height: 100vh;
  overflow: auto;
  .wrapper {
    height: 93vh;
    overflow: hidden;
    position: relative;
  }

  .tabs {
    height: 43px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .scroll-container[data-v-897d812f] {
    overflow-y: auto;
  }

  .van-tab {
    height: calc(100% - 40px);
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    box-sizing: border-box;
  }

  .content {
    position: sticky;
    top: 0;
  }

  .scroll-container {
    overflow-y: auto;
  }
  .zw-course {
    height: 88vh;
    .zw-imgs {
      width: 150px;
      height: 100px;
      background-color: rgb(102, 110, 232);
      border-radius: 10px;
    }

    .dl {
      display: flex;
      padding: 10px;
    }

    .dd {
      margin: 0 10px;
      .zw-title {
        font-weight: bold;
        font-size: 16px;
      }

      .zw-num {
        font-size: 14px;
        padding: 8px 0;
      }

      .zw-price {
        color: #ffc71c;
        font-weight: bold;
        font-size: 15px;
      }
      .zw-price1 {
        font-size: 17px;
        margin: 0px 10px;
        color: #bdbdbd;
      }

    }
  }
}
</style>
